<template>
  <div>
    <div ref="echart" style="width:100%;height:100%;"></div>
  </div>
</template>

<script>
import func from '@/assets/js/func.js'
export default {
  mounted() {
    // 请求返回数据后  不推荐使用vue set变量
    this.$nextTick().then(() => {
      this.init()
    })
  },
  props: ['params'],
  computed: {
    saleVolume () {
      if (!this.params.saleVolumeInfo) return []
      return this.params.saleVolumeInfo.map(item => item.saleVolume)
    },
    statisDay () {
      if (!this.params.saleVolumeInfo) return []
      return this.params.saleVolumeInfo.map(item => item.statisDay.replace(/^[0-9\-]{5}/, ''))
    }
  },
  watch: {
    'params.saleVolumeInfo' () {
      this.$nextTick().then(() => {
        this.init()
      })
    }
  },
  methods: {
    init () {
      let arr = []
      for(let i = 0 ; i < 30 ; i++){
        arr.push('4-'+(i+1))
      }
      let echart = this.$echarts.init(this.$refs["echart"]);
      echart.setOption({
        // backgroundColor: '#12152b',
        title: {
            text: '本市场交易额趋势分析图（近30日）',
            textStyle: {
              color: '#00dcde',
              // fontWeight: 'lighter',
              fontSize: 16,
            },
            left: 10,
            top: 0
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '6%',
            containLabel: true
        },
        // toolbox: {
        //     feature: {
        //         saveAsImage: {}
        //     }
        // },        
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.statisDay,
          axisLabel: {
            color: '#919CA7',
            rotate: 60
          },
          axisLine:{
            lineStyle: {
              color: '#919CA7'
            }
          },
        },
        yAxis: {
            type: 'value',
            axisLabel: {
              color: '#919CA7'
            },
            axisLine:{
              lineStyle: {
                color: '#919CA7'
              }
            },
            splitLine:{
              show: true,
              lineStyle: {
                color: '#fff',
                opacity:'0.2'
              }
            }
        },
        series: [
            {
                name:'交易额(万元)',
                type:'line',
                smooth: true,
                lineStyle: {
                  color: '#0EC49E'
                },
                showSymbol: false,
                areaStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: func.allColor(1)
                    }, {
                        offset: 1,
                        color: func.allColor(0)
                    }])
                },
                data: this.saleVolume
            }
        ]
      })
    }
  }
};
</script>
